<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/question.css">
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
</head>
<body class="blue-bg">
    <div class="vueApp" v-cloak>
        <header id="header" class="header blue-bg" data-flex="box:justify cross:center">
            <img src="../../image/nav_back.png" onclick="api.closeWin()" alt="">
            <p class="title">{{pageName}}</p>
            <p onclick="handleIndex()" class="q-index">{{q_index+1}}/{{listData.length}}</p>
        </header>
        <header style="height: 45px;"></header>
        <div class="swiper-container" id="swiperList">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-no-swiping" v-for="item,index in listData">
                    <div class="slide">
                        <div class="silde-content">
                            <div class="q-head" data-flex="main:justify cross:center">
                                <p class="q-name">{{item.questionName}}</p>
                                <img v-if="item.questionAudioUrl" @click="handlePlayWord(index)" class="voice" :src="isPlay ? '../../image/course/pause.png' : '../../image/course/play2.png'" alt="">
                                <p v-if="q_type == 6 || q_type == 4" class="q-clear" onclick="handleClearLine()">{{q_type == 4 ? '重新排序' : '重新连接'}}</p>
                            </div>
                            <div v-if="item.question" class="q-content">
                                <p style="word-break: normal;" v-html="item.question"></p>
                            </div>
                            <img v-if="item.questionPicUrl" class="q-img" :src="item.questionPicUrl" alt="">
                            <div v-if="q_type == 3" class="q-judge">
                                <!-- 判断 -->
                                <p @click="handleJudge(_index)" v-for="option,_index in item.optionList" :class="item.sel == _index ? 'select' : ''">{{option.optionContent}}</p>
                            </div>
                            <div v-if="q_type == 4" :class="'q-list-box'+index">
                                <!-- 排序 -->
                                <div class="empty-box">
                                    <!-- 空 -->
                                    <div v-for="option,_index in item.optionList" data-flex="main:center cross:center" :data-index="_index" :class="'droppable'+index">
                                        <span v-if="option.sortIndex !== undefined" style="word-break: normal;">
                                            {{item.optionList[option.sortIndex].optionContent}}
                                        </span>
                                        <!--  @click="handleClearDrag(_index)" -->
                                        <!-- <img v-if="option.sortIndex !== undefined" src="../../image/search_history_right.png" alt=""> -->
                                    </div>
                                </div>
                                <div class="option-box">
                                    <!-- 选项 -->
                                    <div v-for="option,_index in item.optionList" draggable="true" data-flex="main:center cross:center" :class="'draggable'+index+' optionb'+_index" :data-index="_index" style="word-break: normal;">
                                        {{option.optionContent}}
                                    </div>
                                </div>
                            </div>
                            <div v-if="q_type == 5" class="q-options">
                                <!-- 选择 -->
                                <p @click="handleJudge(index)" v-for="option,index in item.optionList" :class="item.sel == index ? 'select' : ''" data-flex="cross:center">{{index|fnIndex}}.&nbsp;&nbsp;{{option.optionContent}}</p>
                            </div>
                            <div v-if="q_type == 6" class="lineQ-box" data-flex="main:justify">
                                <!-- 连线 -->
                                <div class="left">
                                    <div @click="handleLineLeft(option, _index)" v-for="option,_index in item.optionList1" :id="'left_' + index + '_' + _index" :class="option.optionContentType == '1' ? 'xuanxiang text' : 'xuanxiang'" :style="selectLine.indexOf(_index+';') != -1 ? 'border: 0px solid #FFD446;' : ''" data-flex="main:center cross:center">
                                        <!-- <div v-if="option.optionContentType == '1'">
                                            {{option.optionContent}}
                                        </div> -->
                                        {{_index+1}}.
                                        <img :src="option.optionContent" alt="">
                                        <div :id="'left_' + index + '_' + _index + '_line'" class="line"></div>
                                    </div>
                                </div>
                                <div class="right">
                                    <div @click="handleLineRight(option, _index)" v-for="option,_index in item.optionList2" :id="'right_' + index + '_' + _index" class="xuanxiang" data-flex="box:first cross:center">
                                         <!-- v-if="option.optionContentOneType == '1'" -->
                                        <p class="char">{{_index|fnIndex}}</p>
                                        <div style="word-break: normal;" v-html="insertBr(option.optionContentOne)"></div>
                                        <!-- <img v-else :src="option.optionContentOne" alt=""> -->
                                        <!-- <div v-if="option.lineLeft" @click="handleLineClean(option, _index)" class="clean">清空</div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" data-flex="box:mean">
            <div onclick="handleLast()" :class="q_index ? 'last' : 'disable last'">上一题</div>
            <div onclick="handleNext()" v-text="q_index+1 == listData.length ? '提交' : '下一题'"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/question/data_parse.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../script/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="../../script/audio.js"></script>
<script type="text/javascript" src="../../script/localFile.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var header, pageParam = {};
    var playIndex = -1;
    apiready = function(){
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;

        fnInit();
        // 初始化语音播放
        Audio.init();
        // 设置音频播放时间回调
        addAudioEvent();
        // 初始化下载
        initLocalDownload();
        // 页面消失，停止录音
        api.addEventListener({
            name: 'viewdisappear'
        }, function(ret, err){
            // 停止播放
            Audio.pause();
            // 移除监听事件
            Audio.removeEventListener();
        });
    };

    function handleIndex() {
        var params = {
            name: 'data_list_frm',
            url: '../course1/data_list.html',
            pageParam: {
                listData: vm.listData,
                from: '2',
                activeIndex: vm.q_index,
                winName: api.winName,
                frameName: api.frameName
            }
        };
        fnOpenFrame(params);
    }

    // index浮层选中回调
    function fnSetActiveIndex(index) {
        if(index != vm.q_index) {
            vm.mySwiper.slideTo(index, 300, true);
        }
    }

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                pageName: pageParam.name,
                listData: [],
                q_index: 0,
                q_type: pageParam.code -43, // 1-44 听音填空 2-45 填空 3-46 判断 4-47 排序 5-48 选择 6-49 连线
                selectLine: '',
                isPlay: false
            },
            filters: {
                fnIndex: function(val) {
                    return getChar(val);
                }
            },
            methods: {
                insertBr: function(sender) {
                    return sender.replace(/\r\n|\n/g, '<br>');
                },
                initSwiper: function() {
                    this.mySwiper = new Swiper('.swiper-container', {
                        autoplay: false,
                        loop: false,
                        on: {
                            transitionEnd: function(a, b, c) {
                                vm.q_index = this.activeIndex;
                                vm.selectLine = '';
                                vm.isPlay = false;
                                playIndex = -1;
                                Audio.pause();
                                initDrag(vm.q_index);
                                if(vm.listData[vm.q_index].questionAudioUrl) {
                                    handlePlayWord(vm.q_index);
                                }
                            }
                        },
                    });
                }
            }
        });

        getPageData();
    }

    // 清除连线或者排序
    function handleClearLine() {
        if(vm.q_type == 6) {
            // 连线题
            var item = vm.listData[vm.q_index];
            for(var i = 0; i < item.optionList2.length; i ++) {
                if(item.optionList2[i].lineLeft)
                handleLineClean(item.optionList2[i], i);
            }
            vm.selectLine = '';
        }else if(vm.q_type == 4) {
            // 排序题
            var item = vm.listData[vm.q_index];
            for(var i = 0; i < item.optionList.length; i ++) {
                handleClearDrag(i);
            }
        }
    }

    // 清除排序
    function handleClearDrag(index) {
        var list = deepCopy(vm.listData),
            item = list[vm.q_index];
        var options = item.optionList;
        if(options[index].sortIndex !== undefined) {
            $(".optionb"+ options[index].sortIndex).removeClass("select");
            $(".draggable"+vm.q_index).draggable( "option", "connectToSortable", ".draggable"+vm.q_index);
            options[index].sortIndex = undefined;

            vm.listData = list;
        }
    }

    // 清除连线
    function handleLineClean(option, index) {
        var list = deepCopy(vm.listData);
        var itemData = list[vm.q_index];
        var left = option.lineLeft.replace('left_', '');
        var id = 'left_' + vm.q_index + '_' + left + '_line';
        option.lineLeft = null;
        itemData.optionList2[index] = option;
        itemData.optionList1[left].lineRight = null;
        var line_dom = $api.byId(id);
        $api.css(line_dom, 'width: 0;');
        vm.listData = list;
    }

    // 连线题左侧
    function handleLineLeft(option, index) {
        if (option.lineRight) {
            // 当前选项已经连接右侧
            vm.selectLine = '';
            return;
        };
        var list = vm.listData;
        var itemData = list[vm.q_index];
        // if (!itemData.canChange) return; // 不允许修改
        // 重新选中左侧
        if (vm.selectLine.indexOf(';') > 0 || vm.selectLine == '') {
            vm.selectLine = index + ';';
        } else {
            leftLineToRight(itemData, 'left', index);
        }
        vm.listData = list;
    }
    // 连线题右侧
    function handleLineRight(option, index) {
        if (option.lineLeft) {
            // 当前选项已经连接左侧
            vm.selectLine = '';
            return;
        }
        var list = vm.listData;
        var itemData = list[vm.q_index];
        // if (!itemData.canChange) return; // 不允许修改
        // 重新选中右侧
        if (vm.selectLine.indexOf(';') == 0 || vm.selectLine == '') {
            vm.selectLine = ';' + index;
        } else {
            leftLineToRight(itemData, 'right', index);
        }
        vm.listData = list;
    }
    // 连线
    function leftLineToRight(itemData, side, index) {
        var canLine = false;
        var left = side == 'left' ? index : vm.selectLine.replace(';', '');
        var right = side == 'right' ? index : vm.selectLine.replace(';', '');
        // if (side == 'left' && !itemData.optionList1[left].lineRight) {
        //     canLine = true;
        // } else if (side == 'right' && !itemData.optionList2[right].lineLeft) {
        //     canLine = true;
        // }
        // if (!canLine) return;
        vm.selectLine = '';
        itemData.optionList2[right].lineLeft = 'left_' + left;
        itemData.optionList1[left].lineRight = 'right_' + right;
        var isRight = false; // 连线是否正确，默认否
        // if(itemData.optionList1[left].optionId == itemData.optionList2[right].optionId) {
        //     isRight = true; // 连线正确
        // }
        lineLeftToRight('left_' + vm.q_index + '_' + left, 'right_' + vm.q_index + '_' + right, isRight);

        // 连线结果处理和提交
        // var line_all = true,
        //     line_map = {};
        // for (var i = 0; i < itemData.optionList1.length; i++) {
        //     var item1 = itemData.optionList1[i];
        //     if (item1.lineRight) {
        //         line_map[item1.optionId] = itemData.optionList2[item1.lineRight.replace('right_', '')].optionId;
        //     } else {
        //         line_all = false;
        //         break;
        //     }

        // }
        // if (line_all) {
        //     itemData.fillAnswerStr = JSON.stringify(line_map);
        //     // compareAnswer(itemData);
        //     vm.canSubmite = true;
        //     setTimeout(function() {
        //         autoSubmiteOneQuestion();
        //     })
        // }
    }

    // 排序
    function handleSort(index, toElement, target) {
        // var options = deepCopy(vm.options),
        //     sortIndex = vm.listData[index].sortIndex || 0,
        //     option = options[_index];
        // if(!option.sel) {
        //     // 未选中
        //     option.sel = true;
        //     options[sortIndex].sortIndex = _index;
        //     vm.options = options;
        //     vm.listData[index].sortIndex = ++sortIndex;
        // }
        var list = deepCopy(vm.listData),
            item = list[index];
        var toIndex = target.dataset.index,
            _index = toElement.dataset.index;
        var options = item.optionList;

        if(options[toIndex].sortIndex === undefined) {
            options[toIndex].sortIndex = _index;
            vm.listData = list;
            target.className = target.className + ' select';
            toElement.className = toElement.className + ' select';
            $( ".draggable"+index).draggable( "option", "cancel", ".select" );
        }
        // $( ".droppable" ).droppable( "option", "disabled", ".select" );
    }

    // 选择选项
    function handleJudge(index) {
        var list = deepCopy(vm.listData),
            item = list[vm.q_index];
        item.sel = index;
        // $('.questionValue-0').val(getChar(index));
        vm.listData = list;
    }

    // 播放动作
    function handlePlayWord(index) {
        var list = deepCopy(vm.listData),
            item = list[index];
        // 暂停
        if(playIndex == index) {
            Audio.pause();
            playIndex = -1;
            vm.isPlay = false;
        }else {
            playIndex = index;
            var src = fileIsSave(item.id+'questionAudioUrl') || item.questionAudioUrl;
            Audio.setListAndPlay([{src: src}]);
            vm.isPlay = true;
        }
        vm.listData = list;
    }

    // 音频播放事件回调
    function addAudioEvent() {
        var eventCallback = function(eventType, _playIndex) {
            if(eventType == 0) {
                // 一个音频播放结束
                vm.isPlay = false;
                playIndex = -1;
            }
        };
        var progressCallback = function(progress) {
            // 暂时不需要
        };
        Audio.addEvent(eventCallback, progressCallback);
    }

    // 上一题
    function handleLast() {
        if(vm.q_index) {
            vm.mySwiper.slidePrev();
        }
    }
    // 提交一个题
    function submiteOne(index, _callback) {
        var item = vm.listData[index];
        var url = 'question/compareAnswer';
        var params = {
            otherInfo: '',
            frontScore: '',
            answerStartTime: new Date().getTime(),
            fillAnswerStr: '',
            id: item.id
        };
        params.fillAnswerStr = getFilleAnswer(item, index);
        if(params.fillAnswerStr) {
            var callback = function(data) {
                item.doStatus = data.judgeRight ? '1' : '2';
                _callback ? _callback() : vm.mySwiper.slideNext();
            };
            POST(url, params, callback);
        }else {
            // _callback && _callback();
            fnToast('请先作答');
        }
    }
    // 下一题
    function handleNext() {
        if(vm.q_index+1 == vm.listData.length) {
            // 提交
            var callback = function() {
                if(isSubmiteQuestionList(vm.listData)) {
                    var url = 'question/catalogOverAnswer';
                    var params = {
                        catalogId: pageParam.id,
                        questionTypeCode: pageParam.code
                    };
                    var callback = function(data) {
                        var score = data.Integral;
                        fnToast('提交成功');
                        api.execScript({
                            name: pageParam.winName,
                            frameName: pageParam.frameName,
                            script: 'getPageData()'
                        });
                        fnDelayCloseWin(1000*1.5)
                    };
                    POST(url, params, callback);
                }else {
                    fnToast('全部完成才能提交哦~');
                }
            };
            submiteOne(vm.q_index, callback);
        }else {
            // 下一个
            submiteOne(vm.q_index);
        }
    }

    // 获取页面数据
    function getPageData() {
        var url = 'question/findQuestionList';
        var params = {
            id: pageParam.id,
            questionTypeCode: pageParam.code
        };
        var callback = function(data) {
            var listData = formateQAData(data.listData);
            vm.listData = listData;
            if(vm.listData.length > 0) {
                setTimeout(function() {
                    if(vm.q_type == 4) {
                        initDrag(0)
                    }
                    if(vm.listData[0].questionAudioUrl) {
                        handlePlayWord(0);
                    }
                    vm.initSwiper();
                    header = $('#header');
                    var content_h = window.screen.availHeight - header.outerHeight()
                                    - 50 - 30 - 37 - 36;
                    $('.silde-content').css('min-height', content_h);
                }, 100);
            }
        };
        POST(url, params, callback);
    }

    // 初始化拖动
    function initDrag(index) {
        $(".draggable"+index).draggable({
            revert: true,
            revertDuration: 200,
            containment: '.q-list-box'+index
        });
        $(".droppable"+index).droppable({
            drop: function(event, drag) {
                var target = event.target, toElement = event.toElement;
                handleSort(vm.q_index, toElement, target);
            }
        });
    }
</script>
</html>